<template>
  <el-dialog title="图文库" :lock-scroll="false" :visible.sync="visible" customClass="imglibrary">
    <div class="imglibrary-view">
      <ul class="graphic-list clearfix">
        <li v-for="img in imgList">
          <img :src="img.img" @click="imgActive = img.id"
               :class="{active: imgActive === img.id}">
          <input type="text" v-model="img.text" @change="changeImgTxt(img)" :readonly="user.group !== 'customer'">
          <i class="el-icon-view" @click.stop="fullImg(img.img)"></i>
        </li>
      </ul>
      <div class="graphic-header" v-if="user.group === 'customer'">
        <el-upload
          class="avatar-uploader"
          action="http://up-z2.qiniu.com"
          :show-file-list="false"
          :on-success="handleImgListSuccess"
          :before-upload="beforeAvatarUpload"
          :data="form" style="float: left;">
          <a href="javascript:;">上传图片</a>
        </el-upload>
        <a class="delete-btn" href="javascript:;" @click="deleteImage">删除</a>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'img-library',
    data () {
      return {
        visible: false,
        form: {},
        imgActive: ''
      }
    },
    props: {
      checkList: {
        default: false
      },
      user: {
        default: false
      },
      imgList: {
        default: false
      }
    },
    methods: {
      showToggle () {
        this.visible = !this.visible
      },
      handleImgListSuccess ({key}) {
        this.addImgList(key)
      },
      addImgList (key) {
        this.$http.post('/index/beta_api/uploadImg', {img: key, text: '点击修改描述'})
      },
      beforeAvatarUpload (file) {
        if (file.size / 1024 / 1024 > 2) {
          this.$message.error('上传图片大小不能超过 2MB!')
          return false
        }
        console.log(this.$http.get('/index/beta_api/uploadQiniu', {isFile: true}).then((data) => {
          this.form = {token: data}
        }))
        return this.$http.get('/index/beta_api/uploadQiniu', {isFile: true}).then((data) => {
          this.form = {token: data}
        })
      },
      deleteImage () {
        let active = this.imgActive
        if (!active) {
          this.$message.error('请选择图片!')
          return
        }
        this.$http.post('/index/beta_api/delImg', {id: active})
      },
      changeImgTxt (img) {
        this.$http.post('/index/beta_api/updateImgText', {id: img.id, text: img.text})
      },
      fullImg (img) {
        this.$emit('on-FullImg', img)
      }
    }
  }
</script>

<style lang="scss">
  .imglibrary {
    width: 650px;
    height: 466px;
    background-color: #ffffff;
    border-radius: 5px;

    .el-dialog__header {
      text-align: center;
      padding-top: 40px;
    }
    .el-dialog__title {
      font-size: 18px;
      font-weight: normal;
      font-stretch: normal;
      color: #333333;
      position: relative;
      &:before {
        position: absolute;
        content: '';
        width: 20px;
        height: 1px;
        background: #333333;
        left: -30px;
        top: 10px;
      }
      &:after {
        position: absolute;
        content: '';
        width: 20px;
        height: 1px;
        background: #333333;
        right: -30px;
        top: 10px;
      }
    }
    .el-dialog__body {
      padding: 20px 0 20px 20px;
    }

    .imglibrary-view {
      .graphic-header {
        margin-top: 10px;
        .avatar-uploader {
          width: 130px;
          display: inline-block;
          height: 35px;
          background-color: #3c92e8;
          border-radius: 3px;
          line-height: 35px;
          margin-right: 15px;
          margin-left: 165px;
          text-align: center;
          a {
            color: #ffffff;
          }
        }
        .delete-btn {
          width: 130px;
          height: 35px;
          background-color: #3c92e8;
          border-radius: 3px;
          line-height: 35px;
          text-align: center;
          display: inline-block;
          color: #ffffff;
        }
      }
      .graphic-list {
        overflow: auto;
        height: 318px;
        li {
          float: left;
          margin-right: 30px;
          width: 180px;
          margin-bottom: 14px;
          position: relative;
          &:nth-child(3n) {
            margin-right: 0;
          }
        }
        i {
          position: absolute;
          cursor: pointer;
          right: 0;
          top: 100px;
          background: rgba(0, 0, 0, 0.7);
          width: 20px;
          height: 20px;
          text-align: center;
          line-height: 20px;
          color: #fff;
          font-size: 12px;
        }
        img {
          display: block;
          width: 180px;
          height: 120px;
          border-radius: 3px;
          margin-bottom: 6px;
        }
        .active {
          border: 1px solid #3c92e8;
        }
        input {
          text-align: center;
          border: none;
          outline: none;
          display: block;
          width: 100%;
          background: transparent;
          color: #333333;
        }
      }
    }
  }
</style>
